<template>
    <div style="height: 95%;width: 100%;display:flex;justify-content:center;padding-top: 20px">
        <!--弹框DIV 设置弹框的大小的地方-->
        <div style="background: #fff;width: 700px;height: 600px;box-shadow: #D3DCE6 0px 0px 20px;">
            <div style="height:520px;border: #1C84C6;margin-top: 25px" class="scrollbar">
                <div style="height: 30px;">
                    <!--标题-->
                    <span style="font-size: 18px;margin-left: 25px;">
                        新建发货单
                    </span>
                    <!--返回列表-->
                    <router-link style="margin-left: 500px;" :to="{path:'/zhuye/jiaofu'}">
                        <span>
                            <i slot="suffix" style="font-size: 30px;color: #D3DCE6" class="el-icon-close"></i>
                        </span>
                    </router-link>
                </div>
                <!--height:91%;表单在弹框显示多长-->
                <el-scrollbar style="height:91%;padding-top: 20px;">
                    <div class="shugan"></div>
                    <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                    <br/>
                    <br/>
                    <!--表单-->
                    <!--表单-->
                    <el-form style="margin-top:5px;margin-left: 30px;" :rules="rules" size="mini" :model="jhlist" ref="jhlist">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px;" prop="clientId">
                                    <label slot="label" style="font-size: 13px">客户：</label><br/>
                                    <!--客户名称-->
                                    <el-popover
                                            style="width: 700px; height: 450px;"
                                            placement="right"
                                            trigger="click"
                                            v-model="kehu">
                                        <span style="font-size: 16px;">关联客户模块</span>
                                        <br/>
                                        <el-input @keyup.enter.native="cx" v-model="kehuinput" style="width: 210px; margin-left: 230px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="cx"></i>
                                        </el-input>
                                        <el-button type="primary" style="margin-left: 130px;">新 建</el-button>
                                        <el-table
                                                highlight-current-row
                                                border
                                                ref="kehulist"
                                                :data="kehulist">
                                            <el-table-column type="selection" width="50" align="center" property="clientId"></el-table-column>
                                            <el-table-column width="150" property="clientName" label="客户名称"></el-table-column>
                                            <el-table-column width="100" property="clientRank" label="级别"></el-table-column>
                                            <el-table-column width="150" property="clientMobile" label="手机号码"></el-table-column>
                                            <el-table-column property="clientSite" label="地址"></el-table-column>
                                        </el-table>
                                        <el-pagination
                                                style="margin-left: 350px;"
                                                layout="prev, pager, next"
                                                :page-size="pageSize"
                                                :current-page.sync="currPage"
                                                @current-change="handleCurrentChange"
                                                :total="totalSize">
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzkehu">保 存</el-button>
                                            <el-button type="primary" @click="kehu = false">取 消</el-button>
                                        </div>
                                        <el-input v-if="this.xg==0" v-model="jhlist.clientId.clientName" placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                    <el-input v-if="this.xg==1" :disabled="true" v-model="jhlist.clientId.clientName" placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px" prop="chukuId">
                                    <label slot="label" style="font-size: 13px">出库单：</label><br/><!--出库-->
                                    <el-popover
                                            style="width: 700px; height: 450px;"
                                            placement="right"
                                            trigger="click"
                                            v-model="fahuo">
                                        <span style="font-size: 16px;">关联出库单模块</span>
                                        <br/>
                                        <el-input @keyup.enter.native="cx2" v-model="fahuoinput" style="width: 210px; margin-left: 230px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="cx2"></i>
                                        </el-input>
                                        <el-button type="primary" style="margin-left: 130px;">新 建</el-button>
                                        <el-table
                                                highlight-current-row
                                                border
                                                ref="fahuolist"
                                                :data="fahuolist">
                                            <el-table-column type="selection" width="50" align="center" property="chukuId"></el-table-column>
                                            <el-table-column property="chukuNo" label="出库编号"></el-table-column>
                                            <el-table-column width="100" property="chukuCanku" label="仓库"></el-table-column>
                                            <el-table-column width="150" property="" label="出库时间">
                                                <template slot-scope="d">
                                                    {{d.row.chukuTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column width="150" property="chukuFuzeren" label="负责人"></el-table-column>
                                        </el-table>
                                        <el-pagination
                                                style="margin-left: 350px;"
                                                layout="prev, pager, next"
                                                :page-size="pageSize4"
                                                :current-page.sync="currPage4"
                                                @current-change="handleCurrentChange2"
                                                :total="totalSize4">
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzfahuo">保 存</el-button>
                                            <el-button type="primary" @click="kehu = false">取 消</el-button>
                                        </div>
                                        <el-input v-if="this.xg==0" v-model="jhlist.chukuId.chukuNo" @focus="dakai2" placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                    <el-input v-if="this.xg==1" :disabled="true" v-model="jhlist.chukuId.chukuNo" placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px" prop="shipmentsShipper">
                                    <label slot="label" style="font-size: 13px">发货人：</label><br/>
                                    <el-input v-model="jhlist.shipmentsShipper"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px" prop="shipmentsMode">
                                    <label slot="label" style="font-size: 13px">发货方式：</label><br/>
                                    <el-select style="width:250px" @change="fhfs()" v-model="jhlist.shipmentsMode" placeholder="请选择">
                                        <el-option
                                                v-for="item in options2"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px" prop="shipmentsConsignee">
                                    <label slot="label" style="font-size: 13px">收货人：</label><br/>
                                    <el-input v-model="jhlist.shipmentsConsignee"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px" prop="shipmentsPhone">
                                    <label slot="label" style="font-size: 13px">收货人号码：</label><br/>
                                    <el-input v-model="jhlist.shipmentsPhone"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px" prop="shipmentsDizhisz">
                                    <label slot="label" style="font-size: 13px">地址：</label><br/>
                                    <!--el-cascader级联（城市选择器）-->
                                    <el-cascader v-model="jhlist.shipmentsDizhisz" :options="options" ref="cascaderAddr"
                                                 style="width: 250px;" filterable @change="handleChange" placeholder="选择地址">
                                    </el-cascader>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px" prop="shipmentsSite">
                                    <label slot="label" style="font-size: 13px">详细地址：</label><br/>
                                    <el-input v-model="jhlist.shipmentsSite"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px">
                                    <el-form-item style="width:250px">
                                        <label slot="label" style="font-size: 13px">邮编：</label><br/>
                                        <el-input v-model="jhlist.shipmentsPostcode"></el-input>
                                    </el-form-item>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px;" prop="shipmentsTime">
                                    <label slot="label" style="font-size: 13px">发货时间：</label><br/>
                                    <el-date-picker
                                            v-model="jhlist.shipmentsTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            align="right"
                                            :picker-options="pickerOptions"
                                            style="width:250px">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px" prop="shipmentsNumbers">
                                    <label slot="label" style="font-size: 13px">物流单号：</label><br/>
                                    <el-input v-model="jhlist.shipmentsNumbers"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px" prop="shipmentsFirm">
                                    <label slot="label" style="font-size: 13px">物流公司：</label><br/>
                                    <el-input v-model="jhlist.shipmentsFirm"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px" prop="shipmentsMoneyjsf">
                                    <label slot="label" style="font-size: 13px">运费结算方：</label><br/>
                                    <el-input v-model="jhlist.shipmentsMoneyjsf"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px" prop="shipmentsMoney">
                                    <label slot="label" style="font-size: 13px">发货运费：</label><br/>
                                    <el-input v-model="jhlist.shipmentsMoney"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="18">
                                <el-form-item>
                                    <label slot="label" style="font-size: 13px">备注：</label><br/>
                                    <textarea style="width: 580px;" v-model="jhlist.shipmentsRemark" placeholder="备注说明"></textarea>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <br/>
                    <span style="margin-left:30px;font-size: 13px">产品</span>
                    <br/>

                    <el-table :data="jhlist.xq" style="width: 80%;margin-left: 10px;font-size:13px">
                        <el-table-column
                                align="center"
                                prop="prodetailId.productName"
                                label="产品名称"
                                width="90">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="产品规格">
                            <template slot-scope="s">
                                <span v-for="pro in s.row.prodetailId.qmodeldetails" :key="pro.prodetailId">
                                    {{pro.modetContent}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="数量"
                                prop="shipmentsdetailsNumber"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="打包件数"
                                width="150">
                            <template slot-scope="d">
                                <el-input-number size="mini" :min="1" v-model="d.row.shipmentsdetailsDbumber"></el-input-number>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br/>
                    <div style="margin-left:540px;font-size: 12px;margin-top: 10px;">
                        <span>总金额：{{this.jhlist.deliveryMoney}}</span>
                        <span>元</span>
                    </div>
                    <br/>
                </el-scrollbar>
                <!--确定按钮 设置了固定定位-->
                <div style="text-align: center;width: 80%;position: absolute;top:635px;left:230px;" class="dialog-footer">
                    <router-link :to="{path:'/zhuye/jiaofu'}">
                        <el-button  @click="jilutankuan = false">取 消</el-button>
                    </router-link>
                    &nbsp;&nbsp;
                    <el-button type="primary" @click="addbusiness('jhlist')">确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    import cities from '../router/cities.js'
    export default {
        name: "Zxinzenfahuo",
        data() {
            var hueikuan = (rule, value, callback) => {
            if (this.jhlist.clientId.clientName === null || this.jhlist.clientId.clientName === '') {
                callback(new Error('请先选择客户'));
            } else {
                if (value.chukuNo === '' || value.chukuNo === null) {
                    callback(new Error('请选择出库单'));
                }else {
                    callback()
                }
            }
        };
            var kehua = (rule, value, callback) => {
                if (value.clientName === null || value.clientName === '') {
                    callback(new Error('请选择客户'));
                }else {
                    callback()
                }
            };
            var dz = (rule, value, callback) => {
                if (this.jhlist.shipmentsMode ==='快递') {
                    if (value === '' || value === null) {
                        callback(new Error('请选择地址'));
                    }else {
                        callback()
                    }
                } else {
                    callback()
                }
            };
            var xxdz= (rule, value, callback) => {
                if (this.jhlist.shipmentsMode ==='快递') {
                    if (value === '' || value === null) {
                        callback(new Error('请输入详细地址'));
                    }else {
                        callback()
                    }
                } else {
                    callback()
                }
            };
            var dh= (rule, value, callback) => {
                if (this.jhlist.shipmentsMode ==='快递') {
                    if (value === '' || value === null) {
                        callback(new Error('请输入详细地址'));
                    }else {
                        callback()
                    }
                } else {
                    callback()
                }
            };
            var wlgs= (rule, value, callback) => {
                if (this.jhlist.shipmentsMode ==='快递') {
                    if (value === '' || value === null) {
                        callback(new Error('请输入详细地址'));
                    }else {
                        callback()
                    }
                } else {
                    callback()
                }
            };
            var yfjsf= (rule, value, callback) => {
                if (this.jhlist.shipmentsMode ==='快递') {
                    if (value === '' || value === null) {
                        callback(new Error('请输入详细地址'));
                    }else {
                        callback()
                    }
                } else {
                    callback()
                }
            };
            var yf= (rule, value, callback) => {
                if (this.jhlist.shipmentsMode ==='快递') {
                    if (value === '' || value === null) {
                        callback(new Error('请输入运费金额（只能为正数）'));
                    } else {
                        var numReg = /^[0-9]*$/
                        var numRe = new RegExp(numReg)
                        if (!numRe.test(value)) {
                            callback(new Error('金额只能为正数字'));
                        }else {
                            if (value <=0) {
                                callback(new Error('金额只能为正数字'));
                            }else {
                                callback()
                            }
                        }
                    }
                } else {
                    callback()
                }
            };
            return {
                rules: {
                    clientId: [
                        {validator: kehua, required: true, trigger: ['blur','change']},
                    ],
                    chukuId: [
                        {validator: hueikuan, required: true, trigger: ['blur','change']},
                    ],
                    shipmentsShipper: [
                        {required: true, message: '请输入发货人', trigger: 'change' },
                    ],
                    shipmentsMode: [
                        {required: true, message: '请选择发货方式' ,trigger: 'change' },
                    ],
                    shipmentsPhone: [
                        {required: true, message: '请输入收货人电话号码', trigger: 'change' },
                    ],
                    shipmentsConsignee: [
                        {required: true, message: '请输入收货人', trigger: 'change' },
                    ],
                    shipmentsTime: [
                        {required: true, message: '请选择发货时间', trigger: 'change' },
                    ],
                    shipmentsDizhisz: [
                        {validator: dz, message: '请选择发货地址', trigger: ['blur','change'] },
                    ],
                    shipmentsSite: [
                        {validator: xxdz, message: '请选择发货地址', trigger: ['blur','change'] },
                    ],
                    shipmentsNumbers: [
                        {validator: dh, message: '请输入快递单号', trigger: ['blur','change'] },
                    ],
                    shipmentsFirm: [
                        {validator: wlgs, message: '请输入物流公司', trigger: ['blur','change'] },
                    ],
                    shipmentsMoneyjsf: [
                        {validator: yfjsf, message: '请选择运费结算方', trigger: ['blur','change'] },
                    ],
                    shipmentsMoney: [
                        {validator: yf, message: '请输入运费金额', trigger: ['blur','change'] },
                    ],

                },
                options2: [{
                    value: '自提',
                    label: '自提'
                }, {
                    value: '快递',
                    label: '快递'
                }],
                fahuo:false,
                fahuoinput:'',
                pageSize4:5,//发货单分页页大小
                currPage4:1,//发货单当前页码，默认为1
                totalSize4:0,//发货单总记录数
                fahuolist:[],//发货单集合
                options: cities,
                jhlist:{
                    shipmentsId: 0,
                    clientId: {
                            clientId: 0,
                            updateTime: null,
                            clientIndustry: null,
                            clientSource: null,
                            clientUrl: null,
                            establishPerson: null,
                            establishTime: null,
                            clientName: '',
                            clientRank: null,
                            clientPhone: null,
                            clientMobile: null,
                            clientSite: null,
                            clientRemark: null,
                            clientPeople: null,
                            clientCjpeople: null,
                            clientState: 0,
                            clientIffollowup: 0,
                            clientSheng: null,
                            clientSz: null,
                            empId: null,
                            tfyclueFormsByClueId: null,
                            tfylinkmanFormsByClientId: null,
                            zbartersByClientId: null,
                            zcontractsByClientId: null,
                            zdeliverylogsByClientId: null,
                            zinvoicesByClientId: null,
                            zordersByClientId: null
                        },
                    chukuId: {
                            chukuId: 0,
                            chukuNo: null,
                        },
                    shipmentsShipper:null,
                    shipmentsConsignee:null,
                    shipmentsTime:null,
                    shipmentsPhone:null,
                    shipmentsProvince:null,
                    shipmentsCity:null,
                    shipmentsDiqu:null,
                    shipmentsSite:null,
                    shipmentsPostcode:null,
                    shipmentsMode:null,
                    shipmentsFirm:null,
                    shipmentsNumbers:null,
                    shipmentsState:'运输中',
                    shipmentsMoneyjsf:null,
                    shipmentsMoney:null,
                    shipmentsRemark:null,
                    shipmentsDizhisz:null,
                    xq:[]
                    },
                kehu:false,//客户弹出框
                kehuinput:'',//客户弹框搜索框
                kehulist:[],//客户表格信息
                pageSize:5,//客户分页页大小
                currPage:1,//客户当前页码，默认为1
                totalSize:0,//客户总记录数
                pickerOptions: {//开票日期快捷选择方式
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                xg:0
            };
        },
        methods: {
            /*当前页方法*/
            handleCurrentChange(val) {
                this.initData(val);
            },
            /*当前页方法*/
            handleCurrentChange2(val) {
                this.fahuoinitData(val);
            },
            cx(){
                this.initData(this.currPage);
            },
            cx2(){
                this.fahuoinitData(this.currPage4);
            },
            fhfs(){
                this.jhlist.shipmentsProvince=null;
                this.jhlist.shipmentsCity=null;
                this.jhlist.shipmentsDiqu=null;
                this.jhlist.shipmentsDizhisz = null;
                this.jhlist.shipmentsSite = null;
            },
            //确定按钮
            addbusiness(formName) {
                if(this.xg!=0){
                    this.xzfapiao();
                }else{
                    this.$refs[formName].validate(valid => {
                        if (valid) {
                            this.xzfapiao();
                        }else{
                            this.$message({
                                message: '验证不通过！',
                                type: 'warning'
                            });
                            return false;
                        }

                    });
                }
            },
            // 获取省市区地址级联
            handleChange(e, form, thsAreaCode) {
                thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
                this.print(thsAreaCode.length)
                //省市区赋值
                if(e.length!=0){
                    this.jhlist.shipmentsProvince=thsAreaCode[0];
                    this.jhlist.shipmentsCity=thsAreaCode[1];
                    this.jhlist.shipmentsDiqu=thsAreaCode[2];
                    this.jhlist.shipmentsDizhisz = e[0]+','+e[1]+','+e[2];
                    this.jhlist.shipmentsSite = thsAreaCode[0]+thsAreaCode[1]+thsAreaCode[2];
                }
            },
            //根据退货单ID查询退货单详情所有产品信息
            jhxqinitData(dd){
                this.$axios.post("http://localhost:8088/jf/list_jhxq",this.qs.stringify(
                    {search:dd}))
                    .then(v=>{
                        this.jhlist.xq= v.data;
                    })
                    .catch()
            },
            //根据订单ID查询出库表数据
            fahuoinitData(dd){
                this.$axios.post("http://localhost:8088/chuku/list_chukutk",this.qs.stringify(
                    {search:this.fahuoinput,search2:this.jhlist.clientId.clientId, page:dd, size:this.pageSize4}))
                    .then(v=>{
                        this.fahuolist = v.data.rows;
                        this.totalSize4 = v.data.total;
                    })
                    .catch()
            },
            //根据发货单ID查询发货单单详情所有产品信息
            fhxqinitData(){
                this.$axios.post("http://localhost:8088/chuku/list_chukuxq",this.qs.stringify(
                    {search:this.jhlist.chukuId.chukuId}))
                    .then(v=>{
                        v.data.forEach((a,i)=>{
                            const htxq = {};
                            htxq.rukuxqId=0;
                            htxq.prodetailId=null;
                            htxq.rukuxqNumber=null;
                            this.$set(htxq,'rukuxqId',0);
                            this.$set(htxq,'prodetailId',a.prodetailId);
                            this.$set(htxq,'shipmentsdetailsNumber',a.chukuNumber);
                            this.jhlist.xq.splice(i,0,htxq);
                        })
                    })
                    .catch()
            },
            //点击出库输入框就查询出库信息
            dakai2() {
                this.fahuoinitData(this.currPage4);
            },
            //选择发货单确定按钮
            xzfahuo() {
                this.$refs.fahuolist.selection.forEach((pro)=>{
                    this.jhlist.chukuId=pro;
                });
                this.jhlist.xq=[];
                this.fhxqinitData();
                this.fahuo=false;
                this.fahuoinput='';
            },
            //选择客户确定按钮
            xzkehu() {
                this.$refs.kehulist.selection.forEach((pro) => {
                    this.jhlist.clientId = pro;
                });
                this.kehu = false;
                this.kehuinput = '';
            },
            //客户查询方法
            initData(dd) {
                this.$axios.post("http://localhost:8088/dindan/kehu_list", this.qs.stringify(
                    {search: this.kehuinput, page:dd, size: this.pageSize,}))
                    .then(v => {
                        this.kehulist = v.data.rows;
                        this.totalSize = v.data.total;
                    })
                    .catch()
            },
            xzfapiao(){
                this.$axios.post("http://localhost:8088/fahuo/add",this.jhlist)
                    .then(()=>{
                        if(this.xg==0){
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '新增成功!',
                            });
                            this.$router.push({
                                path:'/heton'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '修改成功!',
                            });
                            this.$router.push({
                                path:'/heton'
                            });
                        }
                    }).catch(()=>{
                        if(this.xg==0){
                            this.$message({
                                showClose: true,
                                message: '新增失败',
                                type: 'error'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                    }
                )
            },
        },
        created: function () {
            this.initData(this.currPage);
            if(this.$route.query.key!=null){
                this.jhlist=this.$route.query.key;
                this.xg = 1;
                this.jhxqinitData(this.jhlist.deliveryId)
            }
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            }
        }
    }
</script>

<style scoped>
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }

    /deep/ .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }

</style>